<template>
  <div class="item" @click="go()" :class="{ active: isActive() }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    routerName: {
      type: String,
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    go() {
      this.$router.push({ name: this.routerName })
    },

    isActive() {
      return this.$route.name === this.routerName
    },
  },
}
</script>

<style lang="less" scoped>
.item {
  font-size: 14px;
  color: #bda28d;
  height: 50px;
  line-height: 50px;
  padding-left: 45px;
  cursor: pointer;
  display: flex;
  align-items: center;

  /deep/svg {
    margin-right: 6px;
    .stroke-color {
      stroke: #bda28d;
    }
    .fill-color {
      fill: #bda28d;
    }
  }

  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  &.active {
    color: white;
    /deep/svg {
      .stroke-color {
        stroke: white;
      }
      .fill-color {
        fill: white;
      }
    }
  }
}
</style>